<template>
    <view class="container">
        <scroll-view class="scroll-view" :style="{ height: scrollHeight + 'px' }" scroll-y @scrolltolower="loadMore">
            <view class="record-list">
                <view class="record-item" v-for="(item, index) in borrowList" :key="index">
                    <view class="record-header">
                        <view class="amount-wrapper">
                            <text class="amount-label">借贷资金</text>
                            <text class="amount">{{ item.amount }}元</text>
                        </view>
                        <text class="type" :class="getStatusClass(item.loanstatus)">{{ getLoanStatusText(item.loanstatus) }}</text>
                    </view>
                    <view class="record-content">
                        <view class="info-item">
                            <text class="label">借贷期限：</text>
                            <text class="value">{{ item.term }}天</text>
                        </view>
                        <view class="info-item">
                            <text class="label">年利率：</text>
                            <text class="value">{{ (item.rate * 100).toFixed(2) }}%</text>
                        </view>
                        <view class="info-item">
                            <text class="label">申请状态：</text>
                            <text class="value">{{ getApplyStatusText(item.applystatus) }}</text>
                        </view>
                        <!-- <view class="info-item">
                            <text class="label">申请时间：</text>
                            <text class="value">{{ formatDate(item.loantime) }}</text>
                        </view> -->
                    </view>
                    <view class="record-footer" v-if="item.applystatus === 2 && item.loanstatus !== 2">
                        <button class="repay-btn" @click="handleRepay(item)">还款</button>
                    </view>
                </view>
            </view>
            <u-loadmore :status="loadStatus" style="margin: 20rpx 0" />
        </scroll-view>
        <view class="apply-btn-wrapper">
            <button class="apply-btn" @click="handleApply">申请借贷</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            borrowList: [],
            loadStatus: 'loadmore',
            page: 1,
            pageSize: 10,
            scrollHeight: 0,
            user: null,
        }
    },
    async onLoad() {
        this.user = await uni.getStorageSync('user')
        this.loadData()
        this.calculateScrollHeight()
    },
    onReady() {
        this.calculateScrollHeight()
    },
    methods: {
        calculateScrollHeight() {
            const systemInfo = uni.getSystemInfoSync()
            this.scrollHeight = systemInfo.windowHeight
        },
        formatDate(dateStr) {
            if (!dateStr) return ''
            const date = new Date(dateStr)
            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
        },
        getLoanStatusText(status) {
            const statusMap = {
                0: '未逾期',
                1: '逾期',
                2: '已还清'
            }
            return statusMap[status] || '未知状态'
        },
        getApplyStatusText(status) {
            const statusMap = {
                0: '未审核',
                1: '审核未通过',
                2: '审核通过'
            }
            return statusMap[status] || '未知状态'
        },
        getStatusClass(status) {
            const classMap = {
                0: 'status-normal',
                1: 'status-overdue',
                2: 'status-paid'
            }
            return classMap[status] || ''
        },
        loadData() {
            if (this.loadStatus === 'nomore') return
            this.loadStatus = 'loading'
            uni.request({
                url: '/api/my/borrow',
                method: 'POST',
                data: {
                    pageNum: this.page,
                    pageSize: this.pageSize,
                    user: this.user
                },
                success: (res) => {
                    const { loansList, myLoansPageInfo } = res.data
                    if (this.page === 1) {
                        this.borrowList = loansList
                    } else {
                        this.borrowList = [...this.borrowList, ...loansList]
                    }
                    this.loadStatus = this.borrowList.length < myLoansPageInfo.total ? 'loadmore' : 'nomore'
                },
                fail: (err) => {
                    uni.showToast({
                        title: '网络错误',
                        icon: 'none'
                    })
                    this.loadStatus = 'loadmore'
                }
            })
        },
        loadMore() {
            if (this.loadStatus === 'loading' || this.loadStatus === 'nomore') return
            this.loadStatus = 'loading'
            this.page++
            this.loadData()
        },
        handleRepay(item) {
            uni.showModal({
                title: '提示',
                content: `确定还款 ${item.amount}元 吗？`,
                success: (res) => {
                    if (res.confirm) {
                        uni.request({
                            url: `/api/user/repayment/${item.id}`,
                            method: 'PUT',
                            success: (result) => {
                                if (result.data.code === 100) {
                                    uni.showToast({
                                        title: '还款成功',
                                        icon: 'success'
                                    })
                                    this.loadData()
                                } else {
                                    uni.showToast({
                                        title: '还款失败',
                                        icon: 'none'
                                    })
                                }
                            }
                        })
                    }
                }
            })
        },
        handleApply() {
            uni.navigateTo({
                url: '/pages/my/item/apply-borrow'
            })
        }
    },
    onReachBottom() {
        this.loadMore()
    }
}
</script>

<style scoped lang="scss">
.container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa;
    position: relative;
}

.scroll-view {
    flex: 1;
    padding: 30rpx;
    box-sizing: border-box;
    padding-bottom: 160rpx; // 增加底部空间，确保加载更多提示可见
}

.record-list {
    .record-item {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 30rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        
        &:active {
            transform: scale(0.98);
        }

        .record-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24rpx;
            padding-bottom: 20rpx;
            border-bottom: 2rpx solid #f5f5f5;

            .amount-wrapper {
                display: flex;
                flex-direction: column;
                
                .amount-label {
                    font-size: 24rpx;
                    color: #8c8c8c;
                    margin-bottom: 8rpx;
                }

                .amount {
                    font-size: 44rpx;
                    font-weight: 600;
                    font-family: 'DIN Alternate', sans-serif;
                    color: #262626;
                    line-height: 1.2;
                }
            }

            .type {
                font-size: 28rpx;
                padding: 8rpx 20rpx;
                border-radius: 24rpx;
                font-weight: 500;
                
                &.status-normal {
                    color: #00b578;
                    background: rgba(0, 181, 120, 0.1);
                }
                
                &.status-overdue {
                    color: #ff4d4f;
                    background: rgba(255, 77, 79, 0.1);
                }
                
                &.status-paid {
                    color: #8c8c8c;
                    background: #f5f5f5;
                }
            }
        }

        .record-content {
            .info-item {
                display: flex;
                margin-bottom: 20rpx;
                line-height: 1.6;

                &:last-child {
                    margin-bottom: 0;
                }

                .label {
                    color: #8c8c8c;
                    width: 160rpx;
                    font-size: 28rpx;
                }

                .value {
                    flex: 1;
                    color: #262626;
                    font-size: 28rpx;
                    font-weight: 500;
                }
            }
        }

        .record-footer {
            margin-top: 24rpx;
            padding-top: 20rpx;
            border-top: 2rpx solid #f5f5f5;
            display: flex;
            justify-content: center;

            .repay-btn {
                background: linear-gradient(135deg, #00b578 0%, #009d66 100%);
                color: #fff;
                font-size: 28rpx;
                padding: 16rpx 0;
                width: 80%;
                border-radius: 40rpx;
                border: none;
                font-weight: 500;
                box-shadow: 0 6rpx 16rpx rgba(0, 181, 120, 0.2);
                position: relative;
                overflow: hidden;
                transition: all 0.3s ease;
                display: inline-block;
                text-align: center;
                line-height: 1.5;
                
                &::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
                    pointer-events: none;
                }
                
                &:active {
                    opacity: 0.9;
                    transform: scale(0.96);
                    box-shadow: 0 4rpx 12rpx rgba(0, 181, 120, 0.15);
                }
            }
        }
    }
}

.apply-btn-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16rpx 30rpx;
    background-color: #fff;
    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
    z-index: 999;
    
    .apply-btn {
        background: linear-gradient(135deg, #00b578 0%, #009d66 100%);
        color: #fff;
        font-size: 28rpx;
        padding: 16rpx 0;
        width: 100%;
        border-radius: 36rpx;
        border: none;
        font-weight: 500;
        box-shadow: 0 6rpx 16rpx rgba(0, 181, 120, 0.2);
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        
        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
            pointer-events: none;
        }
        
        &:active {
            opacity: 0.9;
            transform: scale(0.96);
            box-shadow: 0 4rpx 12rpx rgba(0, 181, 120, 0.15);
        }
    }
}
</style> 